<template>
    <view class="container">
        <!-- 搜寻出的蓝牙列表 -->
        <loading :show="loading" :tips="tips" class="loading"></loading>
        <!-- 蓝牙列表 -->
        <view class="ble-wrap-scroll" :class="{'isLoading': loading}">
            <block v-for="(item, index) in setDevicesList" :key="index">
                <ble-item class="ble-item" :deviceData="item" type="set" :index="index" @handlerClick="itemClick"></ble-item>
            </block>
        </view>
    </view>
</template>

<script>
import bleItem from '@/components/ble-item/ble-item.vue'
import { mapState } from 'vuex'
export default {
    components: {
        'ble-item': bleItem // 蓝牙单列
    },
    data() {
        return {
            deviceId: '' // 设备ID
        }
    },
    computed: {
        ...mapState('set-tag', {
            setDevicesList: 'setDevicesList' // 设备列表
        }),
        ...mapState('ble-search', {
            loading: 'loading', // 转圈
            tips: 'tips' // 搜寻提示
        }),
        ...mapState('ble-info', {
            bleState: 'bleState' // 蓝牙状态
        })
    },
    onLoad() {
        this.searchDevicesHandler()
    },
    // 下拉事件
    onPullDownRefresh() {
        uni.stopPullDownRefresh()
        if (!this.loading) {
            this.searchDevicesHandler()
        }
        uni.stopPullDownRefresh()
    },
    methods: {
        // 初始化查询设备
        searchDevicesHandler() {
            this.$store.dispatch('ble-search/start_bleSearch', 'set')
        },
        // 列表点击
        itemClick(data) {
            uni.navigateTo({
                url: `/pages/ble-config/ble-config?deviceId=${data.deviceId}&mid=${data.mid}`,
                animationType: 'slide-in-right'
            })
        }
    }
}
</script>

<style lang="less" scoped>
.loading {
    position: fixed;
    width: 100%;
    left: 0;
    height: 32rpx;
    line-height: 32rpx;
    padding: 8rpx;
    margin-top: -20rpx;
    background-color: #ededed;
    z-index: 999;
}
.ble-wrap-scroll {
    margin-top: 0;
    transition: margin-top 0.3s;
}
.isLoading {
    margin-top: 28rpx;
}
.ble-item {
    margin-bottom: 20rpx;
}
.container {
    padding: 20rpx;
}
</style>
